<template>
	<view>
		<uni-nav-bar :border="false" dark title="回放" fixed :statusBar="true" left-icon="left" @clickLeft="onLeft">
		</uni-nav-bar>
		<view>
			<video style="width: 100%;" :src="url" autoplay @fullscreenchange="fullscreenchange"></video>
			<uni-section title="直播会看操作面板">
				<uni-list>
					<uni-list-item title="单位:秒">
						<template v-slot:footer>
							90<cuPrpgeress activeColor="#547b44" :min="90" max="1200" handleSize="20px"
								@dragged="dragged"></cuPrpgeress>1200
						</template>
					</uni-list-item>
					<uni-list-item title="当前移动的时间" :rightText="timeData" />
				</uni-list>
			</uni-section>

		</view>
	</view>
</template>

<script>
	import {
		getliverul
	} from '@/api/tournament/index.js'
	import cuPrpgeress from '@/components/cu-progress/cu-progress.vue'
	export default {
		components: {
			cuPrpgeress
		},
		data() {
			return {
				playCode: '',
				url: '',
				timeData: '90'
			}
		},
		methods: {
			fullscreenchange(e) {
				if (!e.detail.fullScreen) { // 退出全屏，锁定竖屏
					plus.screen.lockOrientation('portrait-primary');
				}
			},
			onLeft() {
				uni.navigateBack()
			},
			dragged(data) {
				// console.log(data);
				let {
					value
				} = data;
				console.log(value);
				this.url = this.playCode + '&txTimeshift=on&tsDelay=' + value
				this.timeData = value;
			},
			formatDateTime(date) {
				function padZero(num) {
					return num < 10 ? '0' + num : num;
				}

				var year = date.getFullYear();
				var month = padZero(date.getMonth() + 1);
				var day = padZero(date.getDate());
				var hours = padZero(date.getHours());
				var minutes = padZero(date.getMinutes());
				var seconds = padZero(date.getSeconds());

				return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
			},
		},
		onLoad({
			id
		}) {
			let currentDateTime = new Date(new Date().getTime() + 86400000);
			getliverul(id).then(res => {
				// this.url = res.obsServer
				this.playCode = res.rows[0].viewUrl
				this.url = this.playCode + '&txTimeshift=on&tsDelay=90'
			})
		}
	}
</script>

<style>

</style>